import { createStyles } from 'antd-style';
import { ConfigProvider, Descriptions, Skeleton } from 'antd';
import { DescriptionsItemType } from 'antd/es/descriptions';
import { CloseIcon } from '@ycx/ui';
import { CSSProperties, FC } from 'react';

const useStyle = createStyles(({ css }) => {
  return {
    wrapper: css`
      border-radius: 8px;
      background: var(--ycx-card-bg-color);
      box-shadow: 0 8px 12px 0 rgba(119, 130, 153, 0.08);
      position: absolute;
      top: 104px;

      z-index: 1;
      width: 442px;
      padding: 16px 24px;
    `,
    icon: css`
      color: var(--ycx-font-color-l3);
      position: absolute;
      top: 16px;
      right: 24px;
      font-size: 24px;
      width: 20px;
      height: 20px;
      cursor: pointer;
      transform: scale(1.25);
    `,
    carNo: css`
      display: inline-block;
      border-radius: 4px;
      border: 1px solid var(--ycx-container-bg-color);
      background: var(--ycx-primary-color);
      color: var(--ycx-font-color);

      text-align: center;

      /* 18/CN-Medium */
      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      line-height: 26px; /* 144.444% */
      padding: 3px 4px;
      margin-bottom: 16px;
    `,
  };
});

type Props = {
  data: {
    carNo: string;
    items: DescriptionsItemType[];
  };
  onClose: () => void;
  style?: CSSProperties;
};

const CarInfoWrapper: FC<Props> = ({ data, onClose, style }) => {
  const { styles } = useStyle();

  return (
    <div className={styles.wrapper} style={style}>
      <CloseIcon className={styles.icon} onClick={onClose} />
      {data.items.length ? (
        <>
          <div className={styles.carNo}>{data.carNo}</div>
          <ConfigProvider
            theme={{
              components: {
                Descriptions: {
                  fontSize: 12,
                  colorTextTertiary: 'var(--ycx-font-color-l3)',
                },
              },
            }}
          >
            <Descriptions size="small" column={24} items={data.items} />
          </ConfigProvider>
        </>
      ) : (
        <Skeleton active />
      )}
    </div>
  );
};

export default CarInfoWrapper;
